<template>
  <div class="bottom-bar">
    <div
      v-for="(item, index) in tabsList"
      :key="index"
      :class="[
        'navImage',
        'navPos',
        predictionStore.NavActive == item.value ? 'textActive' : ''
      ]"
      @click="switchNav(item.value)"
    >
      <img
        :src="
          predictionStore.NavActive == item.value
            ? imgList[item.imgA]
            : imgList[item.img]
        "
        alt=""
      />
      {{ item.name }}
    </div>
  </div>
</template>
<script setup lang="ts">
import { usePredictionStore } from '@/pages/conventional-fine-forecasting/store/store'
import nav from '../images/nav.png'
import navA from '../images/navA.png'
import nav1 from '../images/nav1.png'
import nav1A from '../images/nav1A.png'
import nav2 from '../images/nav2.png'
import nav2A from '../images/nav2A.png'
import nav3 from '../images/nav3.png'
import nav3A from '../images/nav3A.png'
import nav4 from '../images/nav4.png'
import nav4A from '../images/nav4A.png'
import nav5 from '../images/nav5.png'
import nav5A from '../images/nav5A.png'
import nav6 from '../images/nav6.png'
import nav6A from '../images/nav6A.png'
const predictionStore = usePredictionStore()
const componentsVisible = computed(() => predictionStore.componentsVisible)

const props = defineProps({
  tabsList: {
    type: Array,
    default: () => {
      return [
        {
          img: 'nav',
          imgA: 'navA',
          name: '气温',
          value: 'TEM'
        },
        {
          img: 'nav1',
          imgA: 'nav1A',
          name: '风',
          value: 'WIND'
        },
        {
          img: 'nav2',
          imgA: 'nav2A',
          name: '降水',
          value: 'RAIN'
        },
        // {
        //   img: 'nav3',
        //   imgA: 'nav3A',
        //   name: '气压',
        //   value: 'PRs'
        // },
        {
          img: 'nav4',
          imgA: 'nav4A',
          name: '湿度',
          value: 'RH'
        },
        {
          img: 'nav5',
          imgA: 'nav5A',
          name: '能见度',
          value: 'VIS'
        }
      ]
    }
  }
})
const imgList = ref({
  nav: nav,
  navA: navA,
  nav1: nav1,
  nav1A: nav1A,
  nav2: nav2,
  nav2A: nav2A,
  nav3: nav3,
  nav3A: nav3A,
  nav4: nav4,
  nav4A: nav4A,
  nav5: nav5,
  nav5A: nav5A
})
const switchNav = val => {
  val == 'RH' || val == 'VIS'
    ? (predictionStore.timerInterval = 3)
    : (predictionStore.timerInterval = 1)

  predictionStore.NavActive = val
  predictionStore.gdskjcCurrentActive = val
  predictionStore.timerIndex = 0
  if (val == 'WIND') {
    useEventBus('handleRemoveLayer').emit('jxybSbt')
    componentsVisible.Sbt = false
  }
  useEventBus('update:rightLengend').emit(val)
}
onMounted(() => {
  predictionStore.NavActive = 'RAIN'
})
</script>
<style scoped lang="scss">
.bottom-bar {
  width: 1351px;
  height: 128px;
  background: url(../images/navBag.png) no-repeat;
  background-size: 100% 100%;
  position: absolute;
  bottom: -11px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10000;
  display: flex;
  justify-content: center;
  align-items: start;
  .navImage {
    width: 98px;
    height: 100px;
    cursor: pointer;
    img {
      width: 98px;
      height: 96px;
    }
  }
  .navPos {
    margin-right: 30px;
    margin-top: -20px;
    font-weight: bold;
    font-size: 16px;
    color: #ffffff;
    line-height: 1.5;
    text-shadow: 0px 0px 6px #00ccff;
    text-align: center;
    font-style: normal;
    text-transform: none;
  }
  .textActive {
    font-weight: bold;
    font-size: 16px;
    color: #ffffff;
    line-height: 1.5;
    text-shadow: 0px 0px 6px #ffd500;
    text-align: center;
    font-style: normal;
  }
  .navPos:first-child,
  .navPos:last-child {
    width: 66px;
    height: 100px;
    margin-top: 9px;
    img {
      width: 66px;
      height: 66px;
    }
  }
  .navPos:nth-child(2),
  .navPos:nth-last-child(2) {
    width: 88px;
    height: 100px;
    margin-top: -13px;
    img {
      width: 88px;
      height: 88px;
    }
  }
}
</style>
